import { BASE_URL } from "./src/utils/http";
import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
import path, { join } from "path";
import styleImport, { VantResolve } from "vite-plugin-style-import";
import postcsspxtoviewport from "postcss-px-to-viewport";
import { createSvgIconsPlugin } from "vite-plugin-svg-icons";
//插件：可以在setup 语法糖情况下 定义组件名称
import VueSetupExtend from "vite-plugin-vue-setup-extend";

//解决低版本浏览器兼容性问题
import legacy from "@vitejs/plugin-legacy";

// https://vitejs.dev/config/
export default defineConfig({
    resolve: {
        alias: {
            "@": join(__dirname, "src"),
        },
    },
    server: {
        host: "0.0.0.0",
        port: 5567,
        proxy: {
            // 选项写法
            "/apiwf": {
                // target: BASE_URL,
                target: "https://tapi.nolovr.com",
                changeOrigin: true,
                rewrite: (path) => path.replace(/^\/apiwf/, ""),
            },
            "/api12": {
                // target: BASE_URL,
                target: "https://video.shipin520.com",
                changeOrigin: true,
                rewrite: (path) => path.replace(/^\/api12/, ""),
            },
        },
    },
    plugins: [
        vue(),
        styleImport({
            resolves: [VantResolve()],
            libs: [
                {
                    libraryName: "vant",
                    esModule: true,
                    resolveStyle: (name) => `../es/${name}/style`,
                },
            ],
        }),
        //配置svg
        createSvgIconsPlugin({
            // 指定需要缓存的图标文件夹
            iconDirs: [path.resolve(process.cwd(), "src/assets")],
            // 指定symbolId格式
            symbolId: "icon-[dir]-[name]",
        }),
        //使用插件 在setup 语法糖情况下 定义组件名称
        //为了方便管理，本项目将路由的name 和 组件的name 设置成相同的字符串
        VueSetupExtend(),
        //解决低版本浏览器兼容性问题
        legacy({
            targets: ["defaults", "not IE 11"],
        }),
    ],
    css: {
        postcss: {
            plugins: [
                postcsspxtoviewport({
                    unitToConvert: "px",
                    viewportWidth: 375,
                    unitPrecision: 5,
                    propList: ["*"],
                    viewportUnit: "vw",
                    fontViewportUnit: "vw",
                    selectorBlackList: [],
                    minPixelValue: 1,
                    mediaQuery: false,
                    replace: true,
                    // exclude: [/node_modules/],
                    include: undefined,
                    landscape: false,
                    landscapeUnit: "vw",
                    landscapeWidth: 568,
                }),
            ],
        },
    },
});
